<!-- 将反应式和反应式详情合并 -->
<template>
  <div style="display: flex">
    <asideTabs :searchVocDetails="searchVocDetails" :vocId="vocId" :vocNext="vocNext" :path="path" :radio="radio">
    </asideTabs>
    <div class="reaction">
      <div class="reaction-title">
        请点击查看<span style="color: rgba(0, 84, 190, 1)"><span v-html="formatting2(vocNext)"></span>{{ searchVocDetails
          }}</span>关联的反应式详细信息
        <!-- <div v-html="formatting('c6h6')"></div> -->
      </div>
      <!-- 参考信息 -->
      <div class="info">
        反应速率单位: 1级: <span>s<sup>-1</sup></span> ; 2级: cm<span class="small"><sup>3</sup></span>/(molecule·s) ; 3级:
        cm<span class="small"><sup>6</sup></span>/(molecule<span class="small"><sup>2</sup></span>·s)
      </div>
      <!-- 大气反应   -->
      <div class="atmospheric"  v-loading="loading"
    element-loading-text="数据加载中"
    element-loading-spinner="el-icon-loading">
        <div class="title">光氧化反应：</div>
        <div class="collapse">
          <el-collapse v-if="tableDataOxygen == undefined ||
      tableDataOxygen == null ||
      tableDataOxygen.length <= 0
      ">
            <el-collapse-item class="content" name="null" title="暂无数据"></el-collapse-item>
          </el-collapse>
          <el-collapse v-model="activeNames" @change="handleChange" accordion v-for="(item, index) in tableDataOxygen"
            :key="index">
            <el-collapse-item class="content" :title="item.equaPlain" :name="index">
              <template slot="title">
                <div v-html="formatting(item.equaPlain)"></div>
              </template>
              <div class="table">
                <el-table :data="item.reactionAtmosList" style="width: 100%"
                  :header-cell-style="{ background: '#eef1f6', color: 'black' }"
                  :cell-style="{ height: '35px', padding: '0' }">
                  <template v-for="(a, i) in tableDataHeader">
                    <el-table-column align="center" :prop="a.prop" :label="a.label" :key="i"></el-table-column>
                  </template>
                  <el-table-column align="center" label="参考文献" prop="refText" :key="a">
                    <!-- 网站转跳 -->
                    <template slot-scope="scope">
                      <a :href="scope.row.refLink" target="_blank">{{
      scope.row.refText
    }}</a>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div class="title">气液界面反应：</div>
        <div class="collapse">
          <el-collapse v-if="tableDataGas == undefined ||
      tableDataGas == null ||
      tableDataGas.length <= 0
      ">
            <el-collapse-item class="content" name="null" title="暂无数据"></el-collapse-item>
          </el-collapse>
          <el-collapse v-model="activeNames" @change="handleChange" accordion v-for="(item, index) in tableDataGas"
            :key="index">
            <el-collapse-item class="content" :title="item.equaPlain" :name="index">
              <template slot="title">
                <div v-html="formatting(item.equaPlain)"></div>
              </template>
              <div class="table">
                <el-table :data="item.reactionAtmosList" style="width: 100%"
                  :header-cell-style="{ background: '#eef1f6', color: 'black' }"
                  :cell-style="{ height: '35px', padding: '0' }">
                  <template v-for="(a, i) in tableDataHeader">
                    <el-table-column align="center" :prop="a.prop" :label="a.label" :key="i"></el-table-column>
                  </template>
                  <el-table-column align="center" label="参考文献" prop="refText" :key="a">
                    <!-- 网站转跳 -->
                    <template slot-scope="scope">
                      <a :href="scope.row.refLink" target="_blank">{{
      scope.row.refText
    }}</a>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div class="title">液相反应：</div>
        <div class="collapse">
          <el-collapse v-if="tableDataWater == undefined ||
      tableDataWater == null ||
      tableDataWater.length <= 0
      ">
            <el-collapse-item class="content" name="null" title="暂无数据"></el-collapse-item>
          </el-collapse>
          <el-collapse v-model="activeNames" @change="handleChange" accordion v-for="(item, index) in tableDataWater"
            :key="index">
            <el-collapse-item class="content" :title="item.equaPlain" :name="index">
              <template slot="title">
                <div v-html="formatting(item.equaPlain)"></div>
              </template>
              <div class="table">
                <el-table :data="item.reactionAtmosList" style="width: 100%"
                  :header-cell-style="{ background: '#eef1f6', color: 'black' }"
                  :cell-style="{ height: '35px', padding: '0' }">
                  <template v-for="(a, i) in tableDataHeader">
                    <el-table-column align="center" :prop="a.prop" :label="a.label" :key="i"></el-table-column>
                  </template>
                  <el-table-column align="center" label="参考文献" prop="refText" :key="a">
                    <!-- 网站转跳 -->
                    <template slot-scope="scope">
                      <a :href="scope.row.refLink" target="_blank">{{
                        scope.row.refText
                        }}</a>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formattingVoc, formatting } from "@/api/formatVoc";
// import { getReactionData, getReactionSimpleData } from "@/api/publicSearch";
import { getReactionData } from "@/api/publicSearch";
import asideTabs from "@/components/AsideTabs";
export default {
  name: "resultView",
  components: { asideTabs },
  data() {
    return {
      form: {
        type: "",
      },
      // 光氧化反应
      tableDataOxygen: [],
      Oxygenreaction: [],
      // 气液界面反应
      tableDataGas: [],
      Gasreaction: [],
      // 气液界面反应
      tableDataWater: [],
      Waterreaction: [],
      radio: "大气化学反应",
      searchVocDetails: "",
      vocId: "",
      equationId: "",
      equationDetail: "",
      //大气反应的表头
      tableDataHeader: [
        {
          prop: "temprature",
          label: "温度(K)",
        },
        {
          prop: "actiEnergy",
          label: "活化能(kJ/mol)",
        },
        {
          prop: "actiRate",
          label: "反应速率",
        },
        {
          prop: "actiLevel",
          label: "反应级数",
        },
        {
          prop: "atmosLife",
          label: "大气寿命(s)",
        },
        // {
        //   prop: "refText",
        //   label: "参考文献",
        // },
      ],
      vocNext: "",
      path: "reaction",
    };
  },
  mounted() {
    this.vocId = this.$route.query.vocId;
    // this.radio = this.$route.query.radio;
    this.searchVocDetails = this.$route.query.searchVocDetails;
    this.vocNext = this.$route.query.vocNext;
    // getReactionSimpleData({
    //   id: this.vocId,
    //   fatherCategory: this.radio,
    // }).then((res) => {
    //   this.tableDataGas = res.data.data["气液界面反应"];
    //   this.tableDataOxygen = res.data.data["光氧化反应"];
    //   this.tableDataWater = res.data.data["液相反应"];
    // });
    this.loading = true;
    getReactionData({
      id: this.vocId,
      fatherCategory: this.radio,
    }).then((res) => {
      this.tableDataGas = res.data.data["气液界面反应"];
      this.tableDataOxygen = res.data.data["光氧化反应"];
      this.tableDataWater = res.data.data["液相反应"];
      this.loading = false;
    });
  },
  methods: {
    handleSelectionChangeOxygen(val) {
      this.Oxygenreaction = val;
    },
    handleSelectionChangeGas(val) {
      this.Gasreaction = val;
    },
    handleSelectionChangeWater(val) {
      this.Waterreaction = val;
    },
    //反应式格式化
    formatting(str) {
      return formattingVoc(str);
    },
    formatting2(str) {
      return formatting(str);
    },
    handle(e) {
      let target = e.target.parentNode.firstChild.innerHTML;
      if (target[0] !== "<") {
        this.equationId = e.target.dataset.id;
        this.equationDetail = e.target.dataset.react;
        this.$router.push({
          path: "/result",
          query: {
            equationId: this.equationId,
            equationDetail: this.equationDetail,
            radio: this.radio,
          },
        });
      }
    },
    //链接中跳转函数
    gotoNewpage(str, radio) {
      let path = str;
      //设置同一个大气和催化反应转换
      this.radio = radio;
      this.$router.push({
        path: path,
        query: {
          searchVocDetails: this.searchVocDetails,
          vocId: this.vocId,
          radio: this.radio,
          vocNext: this.vocNext,
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
@import "../css/common.scss";

.reaction {
  margin: 0px;
  width: 90%;
  overflow-x: hidden;
  overflow-y: hidden;

  // height: 100px;
  .reaction-title {
    text-align: left;
    font-size: #{$first_font_size};
    font-weight: #{$first_font_weight};
    margin-top: #{$first_titile_top}px;
    margin-left: #{$first_titile_left}px;
    margin-bottom: #{$first_titile_bottom}px;
  }

  .title {
    text-align: left;
    font-size: #{$second_font_size};
    font-weight: #{$second_font_weight};
    margin-top: #{$second_titile_top}px;
    margin-left: #{$second_titile_left}px;
    margin-bottom: #{$second_titile_bottom}px;
  }

  .table {
    margin-left: 15px;
    margin-top: 15px;

    li {
      margin-left: 0px;
      margin-bottom: 20px;
      text-align: left;
      font-size: small;
      //  list-style-type :none;
    }
  }

  .el-button--medium {
    font-size: 18px;
  }

  .collapse {
    width: 90%;
    text-align: left;
    font-size: #{$third_font_size};
    font-weight: #{$third_font_weight};
    margin-top: #{$third_titile_top}px;
    margin-left: #{$third_titile_left}px;
    margin-bottom: #{$third_titile_bottom}px;
  }

  .atmospheric {
    margin-left: 10px;

    .title {
      font-size: #{$value2}px;
    }
  }

  .info {
    text-align: left;
    font-size: #{$second_font_size};
    font-weight: #{$second_font_weight};
    margin-top: #{$second_titile_top}px;
    margin-left: #{$second_titile_left}px;
    margin-bottom: #{$second_titile_bottom}px;
  }

  .table el-table {
    max-height: #{$second_line_height}px;
  }

  div[class^="el-collapse-item"] :hover {
    color: rgba(0, 84, 190, 1);
  }

  .table :hover {
    color: black !important;
  }

  .table td {
    // height: #{$second_line_height}px;
    height: 10px !important;
  }

  // 箭头修改
  ::v-deep .el-collapse-item__header {
    align-items: flex-start;
    height: 37px;
    line-height: 40px;
  }

  ::v-deep .el-collapse-item__arrow {
    margin: 14px;
    order: -1;
  }

  // 箭头修改结束
  // 表头高度修改
  ::v-deep .el-table__header tr,
  ::v-deep .el-table__header th {
    // height: 10px;
    padding: #{$second_table_height}px;
  }

  // 表头高度修改结束
  //相关链接
  .link-ul li {
    list-style-type: square;
    width: 90%;
    text-align: left;
    color: rgba(0, 84, 190, 1);
    font-size: #{$third_font_size};
    font-weight: #{$third_font_weight};
    margin-top: #{$third_titile_top}px;
    margin-left: #{$third_titile_left}px;
    margin-bottom: #{$third_titile_bottom}px;
    cursor: pointer;
  }

  .link-title {
    text-align: left;
    font-size: #{$first_font_size};
    font-weight: #{$first_font_weight};
    margin-top: #{$first_titile_top}px;
    margin-left: #{$first_titile_left}px;
    margin-bottom: #{$first_titile_bottom}px;
  }

  a:visited {
    color: rgba(0, 84, 190, 1);
  }

  a:link {
    color: rgba(0, 84, 190, 1);
    /* 修改未访问链接的颜色为蓝色 */
    text-decoration: none;
    /* 移除下划线 */
  }
}
</style>
